<template>
  <div class="pn_withess">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
        <el-card>
          <b class="total"></b>
          <div>
            <p>账号总余额 <el-button size="small" type="text" v-if="show" @click="()=>{this.dialog = true}">提现</el-button></p>
            <h1>{{ totalMoney }}元</h1>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-table size="small" :data="data" v-loading="loading" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="流水号" prop="sn"></el-table-column>
        <el-table-column align="center" label="提现时间" prop="created_at"></el-table-column>
        <el-table-column align="center" label="提现金额" prop="cash"></el-table-column>
        <el-table-column align="center" label="提现状态">
          <template slot-scope="scope">
            <span :class="scope.row.status === 0 ? 'succ' : scope.row.status === 1 ? 'err' : scope.row.status === 2 ? 'warning' : scope.row.status === 5 ? 'warning' : scope.row.status === 6 ? 'warning' : 'err'">
              {{ scope.row.status === 0 ? '提现成功' : scope.row.status === 1 ? '提现失败' : scope.row.status === 2 ? '待确认' : scope.row.status === 5 ? '待处理' : scope.row.status === 6 ? '处理中' : '数据获取失败' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.status !== 0" @click="handleUpdatedInit(scope.row.sn)">更新状态</el-button>
            <span v-else>无</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" :current-page.sync="page.current" :page-size="page.size" @current-change="handleClickPage" layout="total, prev, pager, next, jumper"  class="fr mt20"></el-pagination>
    </el-row>
    <el-dialog title="提现申请" :visible.sync="dialog" width="430px">
      <el-form inline="">
        <el-form-item label="提现金额：￥">
          <el-input :placeholder=" '可提现' + mes + '元'" v-model="money"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="text" size="small" @click="money = mes">全部提现</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="small" @click="handleClickMoey">确定提现</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { handleWitnessInit, updatedInit, pnReflectInit, pnReflectPage } from '@/api/commission'

export default {
  name: 'witness',
  components: {
    Breadcrumb
  },
  data() {
    return {
      loading: true,
      show: true,
      dialog: false,
      mes: 0.00,
      totalMoney: 0.00,
      data: [],
      list: [],
      money: '',
      page: {
        total: 0,
        size: 0,
        current: 1
      }
    }
  },
  methods: {
    init() {
      handleWitnessInit().then(response => {
        if (response.data.errorCode === 0) {
          this.data = response.data.result.date
          this.totalMoney = response.data.result.total_balance
          this.mes = response.data.result.total_tran_out_amount
          this.page.total = response.data.result.total
          this.page.size = response.data.result.pageCount
          this.loading = false
        } else {
          this.$message.error(response.date.errorMsg)
        }
      })
    },
    handleUpdatedInit(sn) {
      updatedInit(sn).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          this.init()
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickMoey() {
      pnReflectInit(this.money).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          this.money = ''
          this.init()
          this.dialog = false
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickPage(v) {
      pnReflectPage(v).then(response => {
        if (response.data.errorCode === 0) {
          this.data = response.data.result.date
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.pn_withess{
  .el-row{
    margin-bottom: 20px;
    .el-col{
      .el-card{
        width: 90%;
        b{
          display: inline-block;
          width: 70px;
          height: 70px;
          margin-right: 10px;
          vertical-align: middle;
        }
        .total{
          background: url('../../assets/img/icon-1.png') center no-repeat;
        }
        .money-1{
          background: url('../../assets/img/icon-2.png') center no-repeat;
        }
        .money-2{
          background: url('../../assets/img/icon-3.png') center no-repeat;
        }
        h1{
          font-weight: 400;
          margin: 0;
        }
        div{
          display: inline-block;
          vertical-align: middle;
          line-height: 1.4;
        }
        /deep/ .el-card__body{
          padding: 10px 20px;
        }
        p{
          margin: 0;
          .el-button{
            padding: 5px 15px;
            border: 1px solid #56c881;
            color: #56c881;
          }
        }
      }
    }
    .el-form{
      display: inline-block;
      .el-form-item{
        display: inline-block;
        label{
          margin-left: 15px;
        }
      }
      .btn30{
        margin-top: -8px;
      }
    }
  }
  .el-dialog{
    .el-form{
      .el-form-item{
        margin: 20px 0;
        .el-button{
          padding: 8px 10px;
          border: 1px solid #409eff;
        }
      }
    }
  }
}
</style>
